<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>时间线</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">{% load static %}
    <link rel="icon" href="{% static 'layuimini/images/favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'layuimini/lib/layui-v2.5.5/css/layui.css' %}" media="all">
    <link rel="stylesheet" href="{% static 'layuimini/css/layuimini.css' %}" media="all">
    <link rel="stylesheet" href="{% static 'layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css' %}" media="all">
    <style>
        .layui-top-box {padding:40px 20px 20px 20px;}
        .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:15px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit;}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .amount {font-size:400%;margin-top:10px;margin-bottom:10px;text-align:center;}
    </style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md9">
              <fieldset class="layui-elem-field layui-field-title">
                <legend>时间线</legend>
              </fieldset>
              <ul class="layui-timeline">
                {% for record in records %}
                <li class="layui-timeline-item">
                  <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                  <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">{{ record.date }}</h3>
                    {% for content in record.contents %}
                    <p>
                      {{ content.record }}
                      <span class="layui-badge-rim" style="margin-left: 3px;">{{content.project}}</span>
                      {% if content.type %}
                      <span class="layui-badge layui-bg-gray">{{content.type}}</span>
                      {% endif %}
                      {% if content.source %}
                      <span class="layui-badge layui-bg-gray">{{content.source}}</span>
                      {% endif %}
                    </p>
                    {% endfor %}
                  </div>
                </li>
                {% endfor %}
                <li class="layui-timeline-item">
                  <i class="layui-icon layui-timeline-axis"></i>
                  <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">开始</div>
                  </div>
                </li>
              </ul>
              <div class="layui-btn-group">
                <a type="button" class="layui-btn layui-btn-primary {% if disabled_pre_page %}layui-btn-disabled{% endif%}" {% if not disabled_pre_page %}href="?page={{pre_page}}&project={{project}}&type={{type}}"{% endif %}>
                  <i class="layui-icon layui-icon-left"></i>
                </a>

                <a type="button" class="layui-btn layui-btn-primary {% if disabled_next_page %}layui-btn-disabled{% endif%}" {% if not disabled_next_page %}href="?page={{next_page}}&project={{project}}&type={{type}}"{% endif %}>
                  <i class="layui-icon layui-icon-right"></i>
                </a>
              </div>
            </div>

            <div class="layui-col-md3">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>过滤</legend>
                </fieldset>
                <form class="layui-form" action="">
                  <div class="layui-form-item">
                    <label class="layui-form-label">项目名</label>
                    <div class="layui-input-block">
                      <input type="text" name="project" placeholder="请输入项目名" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">记录类型</label>
                    <div class="layui-input-block">
                      <input type="text" name="type" placeholder="请输入记录类型" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit>过滤</button>
                    </div>
                  </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</body>
</html>
